<template>
	<div id="Product">
		<!-- 首页横幅界面 -->
		<section class="header-pullapp" v-show="flag">
			<section class="header-pullapp-content">

				<span class="header-pullapp-close">
					<span class="img" @click="flag=!flag">
					</span>
				</span>
				<span class="header-pullapp-img">
					<img src="https://res.vmallres.com/pimages//pages/templateContent/05414906713610941450.png" title=""
						data_ue_src="https://res.vmallres.com/pimages//pages/templateContent/05414906713610941450.png">
				</span>
				<span class="header-pullapp-txtbox">
					<span>
						<div class="header-pullapp-txtbox-title">来华为商城首页</div>
						<div class="header-pullapp-txtbox-txt">立即领取新人专享见面礼</div>
					</span>
				</span>
				<router-link to="/real">
					<span class="header-pullapp-btnbox">
						<span class="header-pullapp-btn">首页</span>
					</span>
				</router-link>
			</section>
		</section>
		<!-- 非凡大师基本信息 -->
		<div class="top_nav">
			<a href="#/Classify"><img class="back" src="../assets/images/product_back.png" alt=""></a>
			<p :class="{top_click: type=='商品'}" @click="toDetails('商品')">商品</p>
			<p :class="{top_click: type == '评价'}" @click="toDetails('评价')">评价</p>
			<p :class="{top_click: type == '参数'}" @click="toDetails('参数')">参数</p>
			<p :class="{top_click: type == '详情'}" @click="toDetails('详情')">详情</p>
			<img class="xiala" @click="xialaKuang = !xialaKuang" src="../assets/images/product_xiala.png" alt="">
		</div>

		<!-- 下拉框 -->
		<div class="header-menu" v-show="xialaKuang">
			<nav>
				<ul class="btn-menu2-items">
					<li class="product_detail_topright_homepage">
						<a href="#/real"><i class="icon-menu-index-black"></i><span>首页</span></a>
					</li>
					<li class="product_detail_topright_search"><a href="#/r_search"><i
								class="icon-menu-search-black"></i><span>搜索</span></a></li>
					<li class="product_detail_topright_category"><a class="category-view-classname" href="#/classify"><i
								class="icon-menu-category-black"></i><span>分类</span></a></li>
					<li class="product_detail_topright_cart"><a href="#/Select"><i
								class="icon-menu-cart-black "></i><span>购物车</span></a></li>
					<li class="product_detail_topright_mine"><a class="personal-view-classname" href="#/My"><i
								class="icon-menu-person-black"></i><span>我的</span></a></li>
				</ul>
			</nav>
		</div>
		<!-- 商品轮播图 -->
		<!-- <div class="banner-imgBox">
			<div class="banner-imgBox2">


				<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_83C1A1DD309DD9E2DD382A75596B74DF.png"
					alt="">

				<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//800_800_69725AB1DB976A3B221A757FCC8552BA.png"
					alt="">
			</div>
			<div class="banner-imgBox-div">
				<div class="on"></div>
				<div class="on"></div>
				<div class="on"></div>
				<div class="on"></div>
				<div class="on"></div>
			</div>
			<img class="banner-imgBox-left" src="../assets/images/product_back_left.png" onclick="marginLeft(false)">
			<img class="banner-imgBox-right" src="../assets/images/product_back_right.png" onclick="marginLeft(true)">

		</div> -->
		<div class="sid">
			<div class="head3_lunbo">
				<!-- 引入轮播图图片 -->
				<a href="#" target="_blank"><img
						src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621//428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png"
						alt=""></a>
				<a href="#" target="_blank"><img
						src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_3872D8D5728CA4B66E9741EC39D1A214.png"
						alt=""></a>
				<a href="#" target="_blank"><img
						src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_83C1A1DD309DD9E2DD382A75596B74DF.png"
						alt=""></a>
				<a href="#" target="_blank"><img
						src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_3E1453BF97C5DC71CCC3F815719FC003.png"
						alt=""></a>
			</div>
		</div>
		<div class="xia">
			<div class="huodong">
				<img src="../assets/images/product_huodong.png" alt="">
			</div>
			<!-- 商品价格详情 -->
			<div class="spname">
				<img @click="youhui = 1" src="../assets/images/product_name.png" alt="">

			</div>
			<div class="youhui_2" v-show="youhui">
				<nav>
					<img src="../assets/images/product_cuxiao.png" alt="">
				</nav>
				<div class="youhui_ok" @click="youhui = 0">
					<span>确定</span>
				</div>
			</div>
			<div class="spselect">
				<div class="spcolor" @click="sp_color"></div>
				<div class="spsize" @click="sp_size"></div>
				<div class="spnum">
					<input type="button" @click="add()" value="+" class="numa">
					<input type="button" value="1" class="num">
					<input type="button" @click="sub()" value="-" class="nums">
				</div>
				<div class="baozhang" @click="bao_zhang=1"></div>
				<div class="youhui_2" v-show="bao_zhang">
					<nav>
						<img src="../assets/images/product_baozhang.png" alt="">
					</nav>
					<div class="youhui_ok" @click="bao_zhang = 0">
						<span>确定</span>
					</div>
				</div>
			</div>
			<div class="spfahuo">
				<img @click="fahuo = 1" src="../assets/images/product_fahuo.png" alt="">
			</div>
			<div class="youhui_2" v-show="fahuo">
				<nav>
					<img src="../assets/images/product_fuwushuoming.png" alt="">
				</nav>
				<div class="youhui_ok" @click="fahuo = 0">
					<span>确定</span>
				</div>
			</div>
			<div class="pingjia" id="pingjia">
				<img @click="" src="../assets/images/product_pingjia.png" alt="">
			</div>
			<div class="pingjia">
				<img @click="canshu = 1" src="../assets/images/product_canshu.png" alt="">
			</div>
			<div class="youhui_2" v-show="canshu">
				<nav>
					<img src="../assets/images/product_allcanshu.png" alt="">
				</nav>
				<div class="youhui_ok" @click="canshu = 0">
					<span>确定</span>
				</div>
			</div>
			<div class="sptuwenxian">
				<img  src="../assets/images/product_tuwenxian.png" alt="">
			</div>
			<div class="tuwen">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/DFD8B723AF92F3B8C985B5DEC41A0FFE.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/B8A030DB9D05BB98DB9143E86CDB5A91.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/AF17DA54F7FA3A6D7111B9C6E88D6F9A.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/AF17DA54F7FA3A6D7111B9C6E88D6F9A.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/E249A35B952741D9B464CBDAA91C502F.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/DA58D572F9965748D5244159C7E7BD06.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/D87BEC293581CB731681BF2A2085E235.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/4279E5A9BE5C3A025E1FDEF4DF91AC5B.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/89D29DA683D5CB80EAF6AD1860DE42DE.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202309/4D71269853746937FEB5B17D8B91E002.jpg" alt="">
				<img src="https://res.vmallres.com//uomcdn/CN/pms/202209/386C48AEC1CD35F864F48A79643669B6.jpg" alt="">

			</div>
		</div>
		<div class="buy">
			<div class="jiagou" @click="addShopcart">
				<span >加入购物车</span>
			</div>
			<div class="timebuy" @click="pay">
				<span>立即购买</span>
			</div>
		</div>



	</div>

</template>

<script>
	var getCookie = function(a) {
	var f = null;
	if (document.cookie && document.cookie != '') {
		var d = document.cookie.split(';');
		for (var c = 0; c < d.length; x = 0
		}
		else {
			x--;
		}
	} else {
		index--;
		x--;
	}
	switchBtn.children[index].classList.add('on2');
	content.style.marginLeft = x * -1530 + "px"
	}
	c++) {
		var b = (d[c] || '').replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, '');
		if (b.substring(0, a.length + 1) == (a + '=')) {
			var e = function(j) {
				j = j.replace(/\+/g, ' ');
				var h = '()<>@,;:\\"/[]?={}';
				for (var g = 0; g < h.length; g++) {
					if (j.indexOf(h.charAt(g)) != -1) {
						if (j.startWith('"')) {
							j = j.substring(1);
						}
						if (j.endWith('"')) {
							j = j.substring(0, j.length - 1);
						}
						break;
					}
				}
				return decodeURIComponent(j);
			};
			f = e(b.substring(a.length + 1));
			break;
		}
	}
	}
	return f;
	},
	cid = '';
	cid = getCookie('cps_id');
	if (cid == '134297') {
		var obj = document.getElementsByClassName('header-pullapp')[0];
		if (obj != null) {
			obj.parentNode.removeChild(obj);
		}
	}

	setTimeout(function() {
		document.getElementById('basicInfo').addEventListener('scroll', function() {
			Utils.imagelazy.render = function(e) {
				var t = e.offset().top,
					docPrd = document.compatMode == 'CSS1Compat' ? document.documentElement : document
					.body;
				return (t < docPrd.clientHeight) && (e.attr('src', e.attr('data-lazy-src')),
					e.removeAttr('data-lazy-src'),
					!0);
			};
		});
	}, 1000);
</script>

<script>
	export default {
		name: 'product',
		data() {
			return {
				flag: true,
				type: '新品',
				xialaKuang: false,
				youhui: false,
				bao_zhang: false,
				fahuo: false,
				canshu: false,
        url: 'https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621//428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png',
        srcList: [
          'https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621//428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png'
        ]
			}
		},
		methods: {
			toDetails(type) {
				console.log(type)
				this.type = type
			},
			add() {
				var txt = document.getElementsByClassName("num")[0];
				var a = txt.value;
				a++;
				txt.value = a;
			},
			sub() {
				var txt = document.getElementsByClassName("num")[0];
				var a = txt.value;
				a--;
				if (a <= 0) {
					txt.value = 1
				} else {
					txt.value = a
				}
			},
			sp_color() {
				console.log('玄黑')
			},
			sp_size() {
				console.log('16GB+1TB')
			},
      addShopcart(){
        this.$store.commit('shopcart/addShopcart', {
          id:1001,
          count:parseInt(1),
          url:'https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621//428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png',
          price:12999,
          detail:'HUAWEI Mate 60 RS 非凡大师 16GB+1TB 玄黑',
          selected:true,
          path:'/Product'
        })
      },
      pay() {
        this.$router.push({
          name: 'pay',
          params: {
            detail: {
             id:1001,
             count:parseInt(1),
             url:'https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621//428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png',
             price:12999,
             detail:'HUAWEI Mate 60 RS 非凡大师 16GB+1TB 玄黑',
             selected:true,
             path:'/Product'
            }
          }
        })
        this.$store.state.onHomePage = false
      }

			// marginLeft(right) {

			// 	var time = 2000;
			// 	let content = document.querySelector('.banner-imgBox2');
			// 	let switchBtn = document.querySelector('.banner-imgBox-div');
			// 	switchBtn.children[0].classList.add('on2');
			// 	let index = 0;
			// 	let x = 0;

			// 	if (right) {
			// 		switchBtn.children[index].classList.remove('on2');
			// 		if (index == switchBtn.children.length - 1) {
			// 			index = 0;
			// 			content.innerHTML += content.innerHTML;
			// 			x++;
			// 		} else {
			// 			index++;
			// 			x++;
			// 		}
			// 		switchBtn.children[index].classList.add('on2');
			// 		content.style.marginLeft = x * -1530 + "px"
			// 	} else {
			// 		switchBtn.children[index].classList.remove('on2');
			// 		if (index == 0) {
			// 			index = switchBtn.children.length - 1;
			// 			if (x == 0) {
			// 				x = 0
			// 			} else {
			// 				x--;
			// 			}
			// 		} else {
			// 			index--;
			// 			x--;
			// 		}
			// 		switchBtn.children[index].classList.add('on2');
			// 		content.style.marginLeft = x * -1530 + "px"
			// 	}
			// 	var interval = setInterval(() => {
			// 		marginLeft(true)
			// 	}, time);


			// 	let container = document.querySelector('.banner-imgBox');
			// 	// 鼠标经过时清除定时器
			// 	container.onmouseover = function() {
			// 		clearInterval(interval);
			// 	}
			// 	// 鼠标移开时设置定时器
			// 	container.onmouseout = function() {
			// 		// 先清除定时器
			// 		clearInterval(interval);
			// 		// 往右滑动并开启定时器
			// 		// marginLeft(true)
			// 		interval = setInterval(() => {
			// 			marginLeft(true)
			// 		}, time);
			// },

		}
	}
</script>


<style>

	.header-pullapp {
		position: relative;
		height: 2.7rem;
		background-color: #fff;
	}

	.header-pullapp-content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 106;
		max-width: 720px;
		margin: 0 auto;
		background-color: #333;
		height: 2.7rem;
		clear: both;
	}

	.header-pullapp-content .header-pullapp-close {
		position: absolute;
		display: inline-block;
		height: 100%;
		width: 2rem;
		left: 0;
	}

	.header-pullapp-content .header-pullapp-img {
		display: block;
		float: left;
		width: 2rem;
		height: 2rem;
		margin-left: 2.1rem;
		margin-top: .35rem;
	}

	.header-pullapp-content .header-pullapp-txtbox {

		display: flex;
		align-items: center;
		-webkit-box-align: center;
		flex-wrap: wrap;
		float: left;
		color: #fff;
		font-size: .65rem;
		margin-left: .5rem;
		height: 100%;
		width: auto;
	}

	.header-pullapp-content .header-pullapp-close .img {
		position: absolute;
		top: .9rem;
		display: block;
		width: .9rem;
		height: .9rem;
		left: .6rem;
		background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon-app-close.png) no-repeat;
		background-size: .85rem .85rem;
	}

	.header-pullapp-txtbox .header-pullapp-txtbox-title {
		font-size: .65rem;
		height: .93rem;
		line-height: .93rem;
	}

	.header-pullapp-txtbox .header-pullapp-txtbox-txt {
		font-size: .55rem;
		margin-top: .1rem;
		height: .786rem;
		line-height: .786rem;
		color: rgba(255, 255, 255, .6);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.header-pullapp-btnbox .header-pullapp-btn {
		font-size: .55rem;
		display: inline-block;
		margin-right: .6rem;
		height: 1.1rem;
		line-height: 1.1rem;
		color: #333;
		max-width: 2.9rem;
		overflow: hidden;
		background: #fff;
		padding: 0 .4rem;
		border-radius: .15rem;
	}

	.header-pullapp-txtbox span:first-child {
		width: 100%;

	}

	img {
		border: 0;
		max-width: 100%;
		height: auto;
		vertical-align: top;
	}

	.header-pullapp-content .header-pullapp-btnbox {
		display: flex;
		align-items: center;
		-webkit-box-align: center;
		flex-wrap: wrap;
		height: 100%;
		float: right;
	}

	/* .tabbar{
	  height:3.8125rem;
	  width: 100%;
	  position: sticky;
	  top: 0;
	}
	.back{
		height:18px;
	}

	.el{
	  width: auto;
	}


	.fade-enter{
	  opacity: 0;
	  transform: translateX(100%);
	}
	.fade-leave-to{
	  opacity: 0;
	  transform: translateX(-100%);
	  position: absolute;
	}
	.fade-enter-active, .fade-leave-active {
	  transition: all .5s ease;
	}
	 */
	.top_nav {
		height: 2.8rem;
		width: 100%;
		position: sticky;
		top: 0;
		text-align: center;
		background-color: #f1f3f5 !important;
		flex: 6;
	}

	.top_click {
		color: rgb(207, 10, 44);
		border-bottom: 4px solid rgb(207, 10, 44);
	}

	.back {
		float: left;
		width: 30px;
		margin-top: 0.625rem;
		margin-left: 1.25rem;
	}

	.top_nav .xiala {
		float: left;
		width: 30px;
		margin-top: 0.56rem;
		margin-right: 0rem;
		margin-left: 1.25rem;
	}

	.top_nav a {
		float: left;
		width: 20%;
	}

	.top_nav p {
		margin-top: 0.625rem;
		width: 15%;
		float: left;
		font-size: 14px;
		color: rgb(115, 118, 120);
	}

	/* 下拉框 */
	.header-menu {
		width: 120px;
		position: absolute;
		top: 3.9rem;
		right: .5rem;
		border-radius: .25rem;
		background-color: #fff;
		box-shadow: 0rem 0rem 0.25rem 0rem rgba(0, 0, 0, .1);
		opacity: .9;
	}

	ul {
		display: block;
		list-style-type: disc;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 20px;
	}

	ol,
	ul {
		list-style: none;
	}

	.header-menu ul li {
		border-bottom: 1px solid rgba(255, 255, 255, .3);
	}

	li {
		display: list-item;
		text-align: -webkit-match-parent;
	}

	.header-menu ul li a {
		height: 2rem;
		border-bottom: 1px solid rgba(213, 213, 213, .5);
		padding: 0 0 0 .7rem;
		align-items: center;
		-webkit-box-align: center;
	}

	.icon-menu-index-black {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
		background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon-home-black.png) no-repeat center;
		background-size: 1.2rem 1.2rem;
	}

	.header-menu ul li span {
		padding-left: .4rem;
		text-align: center;
		font-size: .7rem;
		line-height: normal;
		color: #333;
	}

	.icon-menu-search-black {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
		background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_search_black.png) no-repeat center;
		background-size: 1.2rem 1.2rem;
	}

	.icon-menu-category-black {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
		background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_menu_category_black.png) no-repeat center;
		background-size: 1.2rem 1.2rem;
	}

	.icon-menu-cart-black {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
		background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_cart_black.png) no-repeat center;
		background-size: 1.2rem 1.2rem;
	}

	.icon-menu-person-black {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
		background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_person_black.png) no-repeat center;
		background-size: 1.2rem 1.2rem;
	}

	/* 轮播图 */
	/* .banner-imgBox {
		width: 28.125rem;
		height: 24.375rem;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}

	.banner-imgBox2 {
		width: 23.125rem;
		height: 23.75rem;
		display: flex;
		margin: 0 auto;
		transition: all 0.5s;
	}

	.banner-imgBox2>img {
		width: 425px;
		height: 100%;
	}

	.on {
		width: 5px;
		height: 5px;
		border-radius: 100%;
		background-color: gainsboro;
		margin-left: 20px;
	}

	.banner-imgBox-div {
		width: 400px;
		position: absolute;
		bottom: 20px;
		left: 40%;
		display: flex;
	}

	.on2 {
		background-color: red;
	}

	.banner-imgBox-left {
		position: absolute;
		left: 20px;
		top: 48%;
		width: 48px;
		height: 48px;
	}

	.banner-imgBox-right {
		position: absolute;
		right: 20px;
		top: 48%;
		width: 48px;
		height: 48px;
		margin-right: 0;
	} */
	.xia {
		background-color: #f1f3f5;
		height: auto;
	}

	.sid {
		width: 450px;
		height: 350px;
	}

	.head3 {
		width: 400px;
		height: 330px;
		overflow: hidden;
		float: left;
	}

	.head3_lunbo {
		width: 1600px;
		height: 330px;
		animation: text 10s infinite backwards;
		margin-left: 0%;

		/*消除图片间隔*/

	}

	.head3_lunbo img {
		width: 400px;
		height: 330px;
		text-align: center;
		float: left;
		object-position: 0%;
	}

	@keyframes text {

		/*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
		0%,
		20% {
			margin-left: 0px;
		}

		25%,
		45% {
			margin-left: -400px;
		}

		50%,
		70% {
			margin-left: -800px;
		}

		75%,
		100% {
			margin-left: -1200px;
		}
	}

	.huodong {
		width: 450px;
		height: auto;
	}

	/* 商品价格详情 */
	.spname,
	.spfahuo,
	.canshu,
	.tuwenxian {
		margin: 8px 8px 8px 8px;
		width: 440px;
		height: auto;
	}

	.pingjia {
		margin-left: 3px;
		width: 440px;
		height: auto;
	}

	.youhui_2 {
		width: 450px;
		top: 250px;
		position: absolute;
		z-index:1;
		background-color: #fff;
		box-shadow: 0rem 0rem 0.25rem 0rem rgba(0, 0, 0, .1);
		bottom: 0;
		background-color: #fff;
		border-radius: 1.2rem 1.2rem 0rem 0rem;
	}

	.youhui_2 nav {
		margin-top: 10px;
		margin-left: 15px;
		height: 500px;
		overflow: scroll;
	}

	.youhui_ok span {
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		color: #fff;
		padding: 0 .8rem !important;
		border-top: 1px solid rgba(0, 0, 0, .05);
		box-sizing: border-box;
		margin-left: 210px;
	}

	.youhui_ok {
		height: 2rem;
		line-height: 2rem;
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		border-radius: 1rem;
		background: #cf0a2c;
		top: 500px;

	}

	/* 商品挑选 */
	.spselect {
		background: url(../assets/images/product_select.jpg);
		background-size: 450px;

		width: 450px;
		height: 203px;
	}

	.spcolor,
	.spsize {
		width: 430px;
		height: 53px;
	}

	.baozhang {
		height: 47px;
		width: 430px;
		float: left;
	}

	.spnum {
		height: 50px;
		width: 430px;
		float: left;
	}

	.numa {
		left: 4.5rem;
	}

	.nums {
		left: 5.5rem;
	}

	.num {
		width: 35px;
		height: 35px;
		line-height: 100%;
		size: 45px;
		font-size: .65em;
		color: rgba(0, 0, 0, .9);
		text-align: center;
		box-sizing: border-box;
		left: 5rem;
		padding: 0;
	}
	.tuwen{
		width: 450px;
	}
	/* 加入购物车 */
	.buy{
		height: 60px;
		width: 450px;
		background-color: #f1f3f5;
		align-content: center;
		position: sticky;
		bottom: 130px;
		float: left;
	}
	.jiagou {
		height: 2rem;
		width: 200px;
		margin-left: 20px;
		margin-top: 15px;
		line-height: 2rem;
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		border-radius: 1rem;
		background: #cf0a2c;
		text-align: center;
		float: left;
	}
	.timebuy{
		height: 2rem;
		width: 200px;
		margin-top: 15px;
		margin-left: 10px;
		line-height: 2rem;
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		border-radius: 1rem;
		background: #cf0a2c;
		text-align: center;
		float: left;
	}
	.jiagou span,.timebuy span {
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		color: #fff;
		padding: 0 .8rem !important;
		border-top: 1px solid rgba(0, 0, 0, .05);
		box-sizing: border-box;
	}
</style>
